<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #container{
            width: 400px;
            height: 200px;
            border: 1px solid #000;
        }
        #box{
            width: 400px;
            height: 200px;
        }
        #box img{
            width: 400px;
            height: 200px;
        }
    </style>
    <script src="./jquery-1.8.3.min.js"></script>
</head>
<body>
    <h1>JQ 动画效果</h1>
    <button id="hideBtn">隐藏</button>
    <button id="showBtn">显示</button>
    <button id="toggleBtn">切换</button>
    <button id="fadeto">指定透明度</button>

    <button id="animateBtn">animate</button>
    <button id="stopBtn">停止</button>
    <button id="delayBtn">延时/延迟</button>

    <hr>
    <div id="container">
        <div id="box">
            <img src="./imgs/3.jpg">
        </div>
    </div>

    <script>
        // 隐藏
        $('#hideBtn').click(function(){
            $('#box').hide();
            // $('#box').hide('slow');
            // $('#box').hide(4000); // 隐藏, 宽高透明度
            // $('#box').slideUp(4000); // 上滑动, 高度
            // $('#box').fadeOut(4000); // 淡出, 透明度
        });

        // 显示
        $('#showBtn').click(function(){
            $('#box').show();
            // $('#box').show(4000); // 显示, 宽高透明度
            // $('#box').slideDown(4000); // 下滑动, 高度
            // $('#box').fadeIn(4000); // 淡入, 透明度
        });

        // 切换
        $('#toggleBtn').click(function(){
            $('#box').toggle(1000); // 宽高透明度
            // $('#box').slideToggle(1000); // 高度
            // $('#box').fadeToggle(1000); //  透明度
        });

        // 指定点击触发 对应的轮次
        $('#box').toggle(function(){
            console.log(1);
        },function(){
            console.log(2);
        },function(){
            console.log(3);
        });

        // 指定透明度
        $('#fadeto').click(function(){
            $('#box').fadeTo(3000, 0.3);
        });


        // animate 自定义动画
        $('#animateBtn').click(function(){
            $('#box img').animate({
                // 'width':'0px'
                // 'width':'toggle'
                'width': '1200px',
                'height': '600px'
            }, 3000);
        });

        // 停止动画效果
        $('#stopBtn').click(function(){
            $('#box img').stop();
        });

        // 延迟效果 / 延时摄影
        $('#delayBtn').click(function(){
            $('#box').hide(1000).delay(3000).show(1000);
        });
        
    </script>
</body>
</html>